<template>
  <div id="bz" :style="{backgroundColor: '#' + color}">
    <div class="l">
      <l/>
    </div>
    <div class="r">
      <r/>
    </div>
  </div>
</template>

<script>
import L from './childComps/L'
import R from './childComps/R'

export default {
  name: '',
  data() {
    return {
      infos: [],
      color: 'fff',
      colorday: 'fff',
      colornight: '666',
    };
  },
  components:{
    L,
    R
  },
  watch:{
  },
  methods: {
  },
  computed:{
    nightData() {
      return this.$store.state.isNight
    }
  },
  watch:{
    nightData(newData, oldData) {
      if(newData){
        this.color = this.colorday
      } else {
        this.color = this.colornight
      }
    }
  }
};
</script>

<style scoped>
#bz {
  width: 100%;
  height: 100%;
  padding-left: 1vw;
  display: flex;
}
.l {
  height: 890px;
  flex: 50%;
  margin: 20px;
  border-radius: 6px;
  background: url(https://wx2.sinaimg.cn/large/006yjJnHgy1gebtsgcnlcj30u0190b2b.jpg);
  background-size: 100% 110%;
  background-position: top center;
}
.r {
  flex: 50%;
}
</style>
